<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="A page that demos scrolling performance">
    <meta name="viewport" content="width=device-width">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="demo/style.css">
	<title>Scrolling Demo Page</title>
</head>
<body>
	<header class="strip">
		<div class="option">
			<input id="nav-visible" type="checkbox" checked="checked">
			<label for="nav-visible" tabindex="0">Navigation visible (Disable for improved performance)</label>
		</div>
	</header>

	<!-- Given an id just to make JS selection easy -->
	<nav id="main-nav">
		<header>Fixed Menu</header>
		<ul>
			<li><a href="#">Menu Item 1</a></li>
			<li><a href="#">Menu Item 2</a></li>
			<li><a href="#">Menu Item 3</a></li>
			<li><a href="#">Menu Item 4</a></li>
		</ul>
	</nav>
	<section>
		<h1>Scrolling Demo</h1>
		<figure>
			<img src="demo/header-image.jpg" alt="Header Image">
			<figcaption>A nice sizable masthead image</figcaption>
		</figure>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget purus erat, sit amet volutpat felis. Sed et lectus nisl, id ultricies felis. Vivamus non ante augue, sit amet pellentesque magna. Donec eu dapibus sapien. Morbi in ipsum vel massa hendrerit porttitor. Morbi leo magna, faucibus sed vulputate lacinia, adipiscing a massa. Mauris vitae sem neque, at volutpat nisi. Nullam turpis est, porttitor et sagittis ultricies, volutpat sit amet velit. Donec euismod, tellus sit amet commodo molestie, nunc turpis tincidunt tortor, varius consequat massa eros sed ipsum. Morbi eleifend risus sed mauris elementum in ultrices tortor fermentum. Nunc auctor, mi nec tempor facilisis, nunc orci egestas elit, eu aliquet purus eros vitae libero. Aliquam turpis lectus, hendrerit id lobortis at, faucibus eget dui. Praesent ornare massa placerat nulla vestibulum eu pellentesque est adipiscing.</p>

			<p>In massa velit, bibendum non molestie ut, accumsan ut felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi arcu metus, molestie quis mollis sit amet, porta eget quam. Duis nec tristique velit. Etiam at ante vitae quam vehicula luctus. Pellentesque consequat, sapien in mattis pulvinar, lorem ante adipiscing odio, euismod elementum turpis lectus non odio. Morbi vel consequat enim. Aliquam erat volutpat. Etiam vel felis eget urna pellentesque venenatis eu et nulla.</p>

			<p>Suspendisse vitae turpis id orci elementum ornare. Proin tempus tortor in velit gravida condimentum. Mauris bibendum nunc quis nibh vulputate egestas. Proin pellentesque, tortor at sodales facilisis, lacus nunc rhoncus felis, a bibendum tortor ante ut massa. Vestibulum interdum posuere feugiat. Morbi pulvinar faucibus pharetra. Nullam nisl massa, consequat sed pellentesque ac, hendrerit at nunc. Curabitur pellentesque est sit amet turpis tempor in venenatis felis hendrerit. Proin dictum molestie consequat.</p>

			<p>Aenean vel lectus enim, nec condimentum massa. Quisque id dolor enim, sit amet bibendum arcu. Proin convallis scelerisque tellus, sit amet tincidunt risus hendrerit eu. Duis hendrerit nunc ac lacus condimentum vel tincidunt tortor sodales. Sed id sapien sit amet nisl sagittis egestas ut in eros. Morbi id lacus eget enim scelerisque vulputate. Proin placerat convallis enim, sit amet semper tellus varius vitae. Vivamus placerat nunc in turpis gravida suscipit. Fusce nibh erat, faucibus nec pellentesque a, faucibus et magna. Aenean feugiat accumsan mollis.</p>
		</div>

		<hr />

		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget purus erat, sit amet volutpat felis. Sed et lectus nisl, id ultricies felis. Vivamus non ante augue, sit amet pellentesque magna. Donec eu dapibus sapien. Morbi in ipsum vel massa hendrerit porttitor. Morbi leo magna, faucibus sed vulputate lacinia, adipiscing a massa. Mauris vitae sem neque, at volutpat nisi. Nullam turpis est, porttitor et sagittis ultricies, volutpat sit amet velit. Donec euismod, tellus sit amet commodo molestie, nunc turpis tincidunt tortor, varius consequat massa eros sed ipsum. Morbi eleifend risus sed mauris elementum in ultrices tortor fermentum. Nunc auctor, mi nec tempor facilisis, nunc orci egestas elit, eu aliquet purus eros vitae libero. Aliquam turpis lectus, hendrerit id lobortis at, faucibus eget dui. Praesent ornare massa placerat nulla vestibulum eu pellentesque est adipiscing.</p>

			<p>In massa velit, bibendum non molestie ut, accumsan ut felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi arcu metus, molestie quis mollis sit amet, porta eget quam. Duis nec tristique velit. Etiam at ante vitae quam vehicula luctus. Pellentesque consequat, sapien in mattis pulvinar, lorem ante adipiscing odio, euismod elementum turpis lectus non odio. Morbi vel consequat enim. Aliquam erat volutpat. Etiam vel felis eget urna pellentesque venenatis eu et nulla.</p>

			<p>Suspendisse vitae turpis id orci elementum ornare. Proin tempus tortor in velit gravida condimentum. Mauris bibendum nunc quis nibh vulputate egestas. Proin pellentesque, tortor at sodales facilisis, lacus nunc rhoncus felis, a bibendum tortor ante ut massa. Vestibulum interdum posuere feugiat. Morbi pulvinar faucibus pharetra. Nullam nisl massa, consequat sed pellentesque ac, hendrerit at nunc. Curabitur pellentesque est sit amet turpis tempor in venenatis felis hendrerit. Proin dictum molestie consequat.</p>

			<p>Aenean vel lectus enim, nec condimentum massa. Quisque id dolor enim, sit amet bibendum arcu. Proin convallis scelerisque tellus, sit amet tincidunt risus hendrerit eu. Duis hendrerit nunc ac lacus condimentum vel tincidunt tortor sodales. Sed id sapien sit amet nisl sagittis egestas ut in eros. Morbi id lacus eget enim scelerisque vulputate. Proin placerat convallis enim, sit amet semper tellus varius vitae. Vivamus placerat nunc in turpis gravida suscipit. Fusce nibh erat, faucibus nec pellentesque a, faucibus et magna. Aenean feugiat accumsan mollis.</p>
		</div>
	</section>

	<script>
		var navVisible = document.getElementById('nav-visible');
		var nav = document.getElementById('main-nav');
		function checkVisibility (evt) {
			if (navVisible.checked) {
				nav.classList.remove('hidden');
			} else {
				nav.classList.add('hidden');
			}
		}
		navVisible.addEventListener('change', checkVisibility, false);
		window.addEventListener('DOMContentLoaded', checkVisibility, false);
	</script>
</body>
</html>
